import React from 'react';
import Cubox from '../cubox/cubox';

import * as styles from './Button.module.css';

import colorScheme from '../color-scheme';

const Button = ({ isOutlined, isDisabled, edgeColor = 'blue', bodyColor = 'blue', className, style, onClick, text: buttonText, children }) => {

  const opacity = isDisabled ? 0.5 : 1;

  const QBOXProps = {
    cornerRadius: 20,
    strokeWidth: 1,
    isOutlined,
    opacity,
    onClick,
    style,
    className: styles['button-outer']
  };

  const colors = isOutlined
    ? {
      backColor: colorScheme[edgeColor] ?? edgeColor,
      foreColor: colorScheme[bodyColor] ?? bodyColor,
    }
    : {
      backColor: colorScheme[bodyColor] ?? bodyColor,
    }

  const textColor = isOutlined ? edgeColor : '#FFFFFF';
  const buttonStyle = {
    color: colorScheme[textColor] ?? textColor,
    opacity,
  }

  return <Cubox {...{...QBOXProps, ...colors}} >
    <div {...{ className: `${styles['button-inner']} ${className}`, style: buttonStyle }}>{buttonText ?? children}</div>
  </Cubox>
}

export default Button;